<template>
  <el-aside width="200px">
    <el-menu unique-opened
             :default-active="navigationId">
      <template v-for="(superior) in navigationList">
        <el-submenu :index="String(superior.navigationId)"
                    v-bind:key="String(superior.navigationId)">
          <template slot="title">
            <svg class="icon-tree"
                 aria-hidden="true">
              <use :xlink:href="superior.navigationImg"></use>
            </svg>
            <span>{{ superior.navigationTitle }}</span></template>
          <template v-if="superior.child.length != 0">
            <template v-for="current in superior.child">
              <el-menu-item width="180px"
                            :index="String(current.navigationId)"
                            v-bind:key="String(current.navigationId)"
                            @click="handleNodeClick(String(current.navigationId),current.navigationName)">
                <svg class="icon-tree"
                     aria-hidden="true">
                  <use :xlink:href="current.navigationImg"></use>
                </svg>
                <span>{{ current.navigationTitle}}</span>
              </el-menu-item>
            </template>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  props: {
    navigationList: Array
  },
  data: function () {
    return {
      navigationId: this.Store.getters.navigationId
    }
  },
  methods: {
    handleNodeClick: function (navigationId, pathName) {
      this.Store.commit('navigationId', navigationId)
      this.$router.push({ name: pathName })
    }
  }
}
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.icon-tree {
  width: 22px;
  height: 22px;
  vertical-align: -6px;
  fill: currentColor;
}

.el-aside,
.el-menu {
  height: calc(100%);
}
</style>
